import Head from 'next/head'
import Image from 'next/image'
import { InferGetStaticPropsType } from 'next'

import { getAllFeed } from '@/api/home'
import { Cart } from '~/components/Cart'

import type { I_Post } from '@/types/type'

export default function Home({
  data
}: InferGetStaticPropsType<typeof getServerSideProps>) {
  // console.log('data', data)
  return (
    <>
      <Head>
        <title>My 稀土掘金</title>
        <meta name='description' content='使用 NextJs 构建一个 SSR 稀土掘金' />
        <meta
          name='viewport'
          content='width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover'
        />
        <meta
          name='keywords'
          content='掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python'
        />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className='bg-white text-black min-h-screen'>
        <h1>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </h1>
        {data.map((item, index) => (
          <article key={index} className='mx-auto px-3 w-full max-w-screen-md'>
            <Cart itemInfo={(item as Record<string, I_Post>).item_info} />
          </article>
        ))}
      </main>
    </>
  )
}

/**
 * （Server-side Rendering）：获取每个请求的数据。
 */
export async function getServerSideProps() {
  const data = await getAllFeed()
  return { props: { data } }
}
